import React, { useState } from 'react';

interface ChatSettingProps {
  show: boolean;
  onHide: () => void;
}

const ChatSetting: React.FC<ChatSettingProps> = ({
  show,
  onHide
}) => {
  const [temperature, setTemperature] = useState(0.7);
  const [maxTokens, setMaxTokens] = useState(2000);
  const [selectedModelId, setSelectedModelId] = useState("gpt-3.5-turbo");
  
  // 示例模型列表
  const models = [
    { id: "gpt-3.5-turbo", name: "GPT-3.5 Turbo", description: "快速、响应迅速的模型，适合大多数任务" },
    { id: "gpt-4", name: "GPT-4", description: "更强大、更准确的模型，适合复杂任务" }
  ];
  
  const handleSave = () => {
    // 在这里可以保存设置
    // 例如：将设置保存到 localStorage 或发送到服务器
    
    // 保存后关闭对话框
    onHide();
  };
  
  if (!show) return null;
  
  return (
    <div className="dialog-overlay" onClick={onHide}>
      <div className="dialog" onClick={(e) => e.stopPropagation()}>
        <div className="dialog-header">
          <h3 className="dialog-title">聊天设置</h3>
          <button className="dialog-close" onClick={onHide}>&times;</button>
        </div>
        
        <div className="dialog-body">
          <div className="settings-group">
            <div className="settings-group-title">模型选择</div>
            <div className="settings-item">
              <label className="settings-item-label">选择 AI 模型</label>
              <select 
                className="settings-item-select"
                value={selectedModelId}
                onChange={(e) => setSelectedModelId(e.target.value)}
              >
                {models.map((model) => (
                  <option key={model.id} value={model.id}>
                    {model.name}
                  </option>
                ))}
              </select>
              {models.find(m => m.id === selectedModelId)?.description && (
                <div className="settings-item-description">
                  {models.find(m => m.id === selectedModelId)?.description}
                </div>
              )}
            </div>
          </div>
          
          <div className="settings-group">
            <div className="settings-group-title">生成参数</div>
            <div className="settings-item">
              <label className="settings-item-label">
                温度: {temperature.toFixed(1)}
              </label>
              <input 
                type="range"
                min="0"
                max="2"
                step="0.1"
                value={temperature}
                onChange={(e) => setTemperature(parseFloat(e.target.value))}
                className="settings-item-input"
              />
              <div className="settings-item-description">
                较低的值使输出更确定和集中，较高的值使输出更随机和创造性。
              </div>
            </div>
            
            <div className="settings-item">
              <label className="settings-item-label">
                最大令牌数: {maxTokens}
              </label>
              <input 
                type="range"
                min="100"
                max="4000"
                step="100"
                value={maxTokens}
                onChange={(e) => setMaxTokens(parseInt(e.target.value))}
                className="settings-item-input"
              />
              <div className="settings-item-description">
                限制 AI 回复的最大长度。
              </div>
            </div>
          </div>
        </div>
        
        <div className="dialog-footer">
          <button 
            className="dialog-button dialog-button-secondary"
            onClick={onHide}
          >
            取消
          </button>
          <button 
            className="dialog-button dialog-button-primary"
            onClick={handleSave}
          >
            保存设置
          </button>
        </div>
      </div>
    </div>
  );
};

export default ChatSetting; 